<template>
  <div class="height100">
    <div style="padding: 5px 0 15px 5px">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item><a @click="go" :style="pathStyle">{{title}}</a></el-breadcrumb-item>
        <template v-if="subTitle !=''">
          <el-breadcrumb-item >{{subTitle}}</el-breadcrumb-item>
        </template>
      </el-breadcrumb>
    </div>
    <div class="bread">
      <slot name="body"></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Content",
    props: {
      title: {
        type: String,
        default: ""
      },
      path: {
        type: String,
        default: ""
      },
      subTitle: {
        type: String,
        default: ""
      },
    },
    data() {
      return {
        pathStyle:"font-weight:bold"
      }
    },
    created(){
      if(this.path !=""){
        this.pathStyle ="color: #42A1FF"
      }
    },
    methods:{
      go(){
        if(this.path !=""){
          this.$router.push({path: this.path})
        }
      }
    }
  }
</script>

<style scoped>
  .bread {
    background-color: white;
    border-radius: 2px;
    padding: 15px;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .2);
    box-shadow: 0 0 3px rgba(0, 0, 0, .2);
    height: 100%;
  }
</style>
